<template>
  <div class="outer">
    <div v-for="n in 100" class="content">
      {{ defer(n) }}
      <heavyComp v-if="defer(1)"></heavyComp>
    </div>
  </div>
</template>

<script setup lang="ts">
import heavyComp from '../components/heavyComp.vue'
import { useDefer } from '../hooks/useDefer'
const defer = useDefer()
</script>

<style scoped>
.outer {
  display: flex;
}
.content {
  display: flex;
  flex-direction: column;
}
</style>
